<template>
  <div class="login-page">
    <!-- <div class="login-bg" /> -->
    <div class="login-warp">
      <div class="app-logo">
        <div class="logo-warp">
          <image src="@/static/images/pplogo.png"></image>
        </div>
      </div>

      <div class="login-form">
        <div class="app-title">
          <div class="title-warp">
            <span class="title__text">中源瓷业生产APP</span>
          </div>
          <!--     <div class="sub-title-warp">-->
          <!--      <span class="sub-title__text"></span>-->
          <!--     </div>-->
        </div>
        <div class="form-warp" v-show="!isAuthLogin">
          <uni-forms
            labelAlign="right"
            labelWidth="0"
            :modelValue="loginForm"
            :rules="loginRules"
            ref="logForm"
          >
            <div class="form-row">
              <uni-forms-item name="username">
                <div class="eldan-input">
                  <div class="input__border">
                    <i class="input__icon user" />
                    <input
                      class="input__text"
                      placeholder="请输入用户名"
                      v-model="loginForm.username"
                    />
                  </div>
                </div>
              </uni-forms-item>
            </div>
            <div class="form-row">
              <uni-forms-item name="password">
                <div class="eldan-input">
                  <div class="input__border">
                    <i class="input__icon pass" />
                    <input
                      :type="passwordType"
                      class="input__text"
                      placeholder="请输入密码"
                      v-model="loginForm.password"
                    />
                    <i class="input__icon view-pass" @click="viewPassword" />
                  </div>
                </div>
              </uni-forms-item>
            </div>
            <div class="form-fotter">
              <button class="uni-btn" type="primary" @click="onLogin">登录</button>
            </div>
          </uni-forms>
        </div>
      </div>

      <!-- <div class="copyright-warp">
        <div class="copyright">
          <div class="copyright__text">Copyright © 中源瓷业</div>
        </div>
      </div> -->
    </div>

    <uni-message-ex />
  </div>
</template>

<script setup>
import { computed, reactive, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { useLoginStore } from '@/store/LoginStore'
import { UniTool } from '@/utils/UniTool'
import { UniStore } from '@/utils/UniStorege'
import UniMessageEx from '@/components/UniMessageEx.vue'
import { useMessage } from '@/store/MessageStore'
import { StringUtils } from '@/utils/StringUtils'
import { isDev } from '@/build/env'
import { PageUtil } from '@/utils/PageUtil'
import { useVersion } from '../../hooks/Updates'
import { useVersionStore } from '../../store/VersionStore'

onLoad(() => {})

const msg_pop = reactive({
  type: 'error',
  msg: '',
  dur: 5000
})

const loginForm = reactive({
  username: '',
  password: '',
  rem: true
})

const loginRules = ref({
  username: {
    rules: [
      {
        required: true,
        errorMessage: '用户名不能为空'
      }
    ]
  },
  password: {
    rules: [
      {
        required: true,
        errorMessage: '密码不能为空'
      }
    ]
  }
})
const debug = reactive({
  msg: ''
})
const store = useLoginStore()
const message = useMessage()

const versionStore = useVersionStore()
const { checkNewVersion } = useVersion()

onShow(() => {
  if (isDev) {
    //  loginForm.username = 'admin'
    // loginForm.username = 'cheng'
    // loginForm.username = 'yuan'
    // loginForm.password = '000000'
    loginForm.username = ''
    loginForm.password = ''
  }
})

const logForm = ref()
let rems = UniStore.getObject('u_201')
const isValid = [rems.username, rems.password].every((item) => !StringUtils.isEmptyOrNull(item))

if (isValid) {
  loginForm.username = rems.username
  loginForm.password = rems.password
}
// this.$refs.customForm.setRules(this.customRules)
const isPassword = ref(true)
const passwordType = computed(() => {
  return isPassword.value ? 'password' : 'text'
})
const viewPassword = function () {
  isPassword.value = !isPassword.value
}

const onLogin = function () {
  if (!logForm.value) {
    return
  }

  UniTool.loading('正在登录...')
  logForm.value
    .validate()
    .then(() => {
      store
        .login(loginForm)
        .then((res) => {
          debug.msg = 'login'
          let { success = false, msg = '' } = res

          if (!success) {
            msg_pop.msg = msg
            msg_pop.type = 'error'
            message.error(msg)
            UniTool.closeLoading()
            return
          }

          if (loginForm.rem) {
            // #ifdef APP
            uni.reLaunch({
              url: '../AppMain/index'
            })
            // versionStore.checkVersion().then(res=>{
            //   checkNewVersion(res).then(()=>{
            //
            //   }).catch(()=>{
            //
            //   })
            // })
            // #endif
            // #ifdef H5
            uni.reLaunch({
              url: '../AppMain/index'
            })
            // #endif
          } else {
            UniStore.setObject('u_201', {
              forget: true
            })
          }
          UniTool.closeLoading()
        })
        .catch((err) => {
          console.log(JSON.stringify(err))
          UniTool.closeLoading()
          debug.msg = 'login request error'
          throw new Error(err)
        })
    })
    .catch((err) => {
      UniTool.closeLoading()
      debug.msg = 'login validate error'
    })
}

const accountReq = function () {
  PageUtil.addEvent('new-temp-user-account', () => {}, {
    route: '../AccountRequests/index',
    params: {
      test: 1,
      row: {
        user: 'aaaa &=3 %=2 L-5'
      }
    }
  })
}

const onPrintDemo = function () {
  uni.reLaunch({
    url: '../printdemo/index'
  })
}
</script>

<style lang="scss" scoped>
$icon-scale: 0.7;

.login-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;

  .login-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    z-index: 1;

    &:after {
      content: '';
      background-image: url('~@/static/images/login_bg..jpg');
      background-position: center;
      background-repeat: no-repeat;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    }
  }

  .login-warp {
    flex-grow: 1;
    padding: 0 35rpx;
    z-index: 2;
    margin-top: 75rpx;

    .app-logo {
      display: flex;
      justify-content: center;

      .logo-warp {
        image {
          // width: 960rpx * $icon-scale;
          // height: 220rpx * $icon-scale;
          width: 420rpx * $icon-scale;
          height: 220rpx * $icon-scale;
        }
      }
    }

    .app-title {
      margin: 55rpx 0;
      // color: #357fe4;

      .title-warp {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 50rpx;
      }

      .sub-title-warp {
        margin-left: 45rpx;
        margin-top: 8px;
        font-size: 21px;
      }
    }

    .login-form {
      background-color: #fff;
      // -webkit-box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.1);
      // box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.1);
      //border-radius: 5px;
      overflow: hidden;

      .form-warp {
        padding: 8px 12px;

        .form-row {
          position: relative;
          margin: 50rpx 0;

          .input__border {
            border-bottom: 1px solid #eee;
            position: relative;

            .input__icon {
              position: absolute;
              width: 22px;
              height: 22px;
              display: block;
              bottom: 7px;
              left: 3px;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;

              &.user {
                background-image: url('~@/static/images/icon/user.png');
              }

              &.pass {
                background-image: url('~@/static/images/icon/password.png');
              }

              &.view-pass {
                background-image: url('~@/static/images/icon/viewpass.png');
                right: 0;
                left: unset;
                cursor: pointer;
              }
            }

            .input__text {
              padding-left: 42px;
              padding-bottom: 7px;
              font-size: 18px !important;
              line-height: 1;
            }
          }
        }

        .permission-tips {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .tip__text {
            text-align: center;
            font-size: 32rpx;
          }
        }

        .permission-buttons {
          margin: 45rpx 0;

          .btn-row {
            margin: 35rpx 0;
          }
        }

        .form-fotter,
        .form-footer {
          margin-top: 36rpx;
        }
      }
    }

    .copyright-warp {
      display: flex;
      flex-direction: row;
      justify-content: center;

      .copyright {
        position: absolute;
        bottom: 0;
        margin-bottom: 55rpx;

        .copyright__text {
          text-align: center;
          font-size: 27rpx;
          color: #a6a6a6;
        }
      }
    }
  }
}
</style>
